<template>
  <div id="menu">
    <el-container style="height: 600px;">
      <el-aside width="200px">
        <!--左侧树-->
        <el-tree
            :data="data"
            :props="defaultProps"
            node-key="menuId"
            default-expand-all
            @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-main style="height: 600px">
        <el-button
            type="primary"
            size="mini"
            @click="flush()"
            icon="el-icon-search"
        >刷新</el-button
        >
        <el-form ref="form" :model="form" label-width="80px">
          <el-input v-model="form.parentId" type="hidden"></el-input>
          <el-form-item label="菜单名称">
            <el-input v-model="form.menuName"></el-input>
          </el-form-item>
          <el-form-item label="父节点">
            <el-input
                v-model="form.parentName"
                @focus="dialogMenuTreeVisible = true"
            ></el-input>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="菜单类型" :label-width="formLabelWidth">
            <el-radio v-model="form.menuType" label="M">目录</el-radio>
            <el-radio v-model="form.menuType" label="C">菜单</el-radio>
            <el-radio v-model="form.menuType" label="F">按钮</el-radio>
          </el-form-item>
          <el-form-item label="权限字符">
            <el-input v-model="form.perms"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="是否有效">
            <el-radio v-model="form.visible" label="0">启用</el-radio>
            <el-radio v-model="form.visible" label="1">禁用</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{
                addOrUpdate
              }}</el-button>
            <el-button v-if="seen" type="danger" @click="onDelete"
            >删除</el-button
            >
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <el-dialog title="权限树" :visible.sync=dialogMenuTreeVisible>
      <el-tree
          :data="data"
          :props="defaultProps"
          node-key="parentId"
          show-checkbox
          :check-strictly="true"
          ref="parentMenuTree"
          default-expand-all
      ></el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkSelectNode">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      data: [], //树数据
      form: { visible: "0", menuType: "C", parentName: "根节点", parentId: 0 },
      dialogMenuTreeVisible: false,
      addOrUpdate: "添加",
      seen: false,
      formLabelWidth: "120px",
      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    };
  },
  created() {
    this.treeData();
  },
  methods: {
    //获取权限树
    async loadTreeData() {
      //初始化数据
      let {data} = await this.$http.get("/system/api/menu/selectAll");
      this.data=data.data;
    },
    treeData(){
      this.$http.get("system/api/menu/selectAll").then(resp=>{
        this.data=resp.data.data;
        console.log(this.data)
      })
    },
    //提交
    onSubmit() {
      var url = "";
      if (this.seen) {
        //更新
        url = "/system/api/menu/updateMenu";
      } else {
        //添加
        url = "/system/api/menu/addMenu";
      }
      this.$http
        .post(url, {...this.form,menuName:this.form.menuName})
        .then((response)=>{
          let data = response.data;
          if (response.status == 200) {
            if (data.code==2000){
              //提示成功
              this.$message({
                message: "恭喜你,操作成功",
                type: "success",
              });
              //重新加载数据
              this.treeData();
            }else {
              this.$message.error(response.data.message);
            }
          }
        })
        .catch( () => {
          this.$message.error("你错了。。。");
        });
    },
    //校验选中节点数量
    checkSelectNode() {
      let nodes = this.$refs.parentMenuTree.getCheckedNodes();
      if (nodes.length > 1) {
        this.$message.error("只能选择一个节点。。。");
        return;
      }
      this.form.parentName = nodes[0].menuName;
      this.form.parentId = nodes[0].menuId;
      //关闭弹框
      this.dialogMenuTreeVisible = false;
    },
    //删除  不能直接写delete
    onDelete() {
      this.$http
          .get("/system/api/menu/queryChildrenNumById?menuId="+this.form.menuId)
          .then( ({data}) => {
            if (data.code == 2000) {
              if (data.data > 0) {
                this.$message.error("该节点下有子节点，不能删除。。。");
              } else {
                this
                  .$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                  .then(() => {
                    /*this.$message({
                      type: "success",
                      message: "删除成功!",
                    });*/
                    this.$http
                      .delete("/system/api/menu/deleteMenu?menuId=" + this.form.menuId)
                      .then((response) => {
                        if (response.data.code == 2000) {
                          //提示成功
                          this.$message({
                            type: "success",
                            message: "删除成功!",
                          });
                          //重新加载数据
                          this.loadTreeData();
                        }
                      })
                      .catch( (error) => {
                        this.$message.error("你错了。。。");
                      });
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消删除",
                    });
                  });
              }
            }
          })
          .catch( (error) => {
            this.$message.error("你错了。。。");
          });
    },
    //刷新
    flush() {
      //刷新当前页
      location.reload();
    },
    handleNodeClick(data) {
      this.form=data;
      this.form.menuId = data.menuId;
      this.addOrUpdate = "更新";
      this.seen = true;
    }
  }
}
</script>

<style scoped>

</style>